document.addEventListener('DOMContentLoaded', function () {
    const maskDiv = document.querySelector("div.mask");
    function showMask() {
        if (maskDiv) {
            maskDiv.style.display = "block";
        }
    }
    function hideMask() {
        if (maskDiv) {
            maskDiv.style.display = "none";
        }
    }

    const menuButton = document.querySelector("div.menuimg>img"),
        slidemenu = document.querySelector("div.slidemenu");
    if (menuButton) {
        menuButton.addEventListener("click", function () {
            slidemenu.classList.toggle("slidemenu_active");
            showMask();
        });
        if (maskDiv) {
            maskDiv.addEventListener("click", function () {
                slidemenu.classList.toggle("slidemenu_active");
                hideMask();
            });
        }
    }
    slidemenu.querySelector('div.close_button >img').addEventListener("click", function () {
        slidemenu.classList.toggle("slidemenu_active");
        hideMask();
    });


    const slideParentNode = document.querySelectorAll("ul.menucontent li:has(>ul.children)");
    slideParentNode.forEach((node) => {
        node.children[0].href = "javascript:void(0);";
        node.addEventListener("click", function (e) {
            e.stopPropagation();
            node.children[1].classList.toggle("acitve_menu")
        });

    });

    document.querySelectorAll("button.arrow").forEach((node) => {
        node.addEventListener("click", function (e) {
            e.stopPropagation();
            const categoryListNode = document.querySelector("div.category_list");
            if (categoryListNode) {
                const scrollAmount = window.innerWidth * 0.8;
                categoryListNode.scrollLeft += node.dataset.direction === "left"
                    ? -scrollAmount
                    : scrollAmount;
            }
        });
    });


    //matchs the current date with the button
    const buttons = document.querySelectorAll('.days>button');
    const containers = document.querySelectorAll('.daysdata>div');
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const date = this.getAttribute('data-date');
            // Remove "active" class from all buttons
            buttons.forEach(btn => {
                btn.classList.remove('active');
            });
            button.classList.add('active');
            // Hide all containers
            containers.forEach(container => {
                container.style.display = 'none';
            });

            // Show the selected container
            const activeContainer = document.querySelector(`.container div[data-name="${date}"]`);
            if (activeContainer) {
                activeContainer.style.display = 'block';
            }
        });
    });

    // Trigger click on the "today" button by default
    const defaultButton = document.querySelector('.days button[data-date="today"]');
    if (defaultButton) {
        defaultButton.click();
    }


    // Lazy loading images
    const lazyImages = document.querySelectorAll('img[data-src]');
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => {
        img.addEventListener('error', () => {
            img.src = '/wp-content/themes/hihi2/images/break.svg'; // Fallback image
        })
        imageObserver.observe(img);
    });

});